<template>
    <h2 style="text-align: center;">管理员设置</h2>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">基础数据</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>管理员设置</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 查询表单部分 -->
    <div style="border: 1px solid #ccc; margin: 20px 3px; padding: 20px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="部门名称">
                <el-input v-model="formInline.Department_Name" placeholder="请输入部门名称" clearable />
            </el-form-item>

            <el-form-item label="真实姓名">
                <el-input v-model="formInline.Account_RealName" placeholder="请输入真实姓名" clearable />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="ShowAccount">查询</el-button>
                <el-button type="danger" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- 数据显示部分 -->
    <div style="border: 1px solid #ccc; margin: 10px 3px; padding: 20px;">
        <el-button type="success" @click="dialogVisible = true">新增+</el-button>
        <el-table :data="Info" style="width: 100%">
            <el-table-column fixed type="index" label="序号" width="100" />
            <el-table-column prop="Id" label="账号编号" width="150" />
            <el-table-column prop="Accoun_Name" label="账号名称" width="120" />
            <el-table-column prop="Accoun_Phone" label="手机号" width="120" />
            <el-table-column prop="Accoun_CodeId" label="身份证号" width="200" />
            <el-table-column prop="Depart_Name" label="部门名称" width="120" />
            <el-table-column prop="Role_Name" label="角色名称" width="120" />
            <el-table-column fixed="right" label="Operations" min-width="120">
                <template v-slot="scope">
                    <el-button size="small" v-if="scope.row.Role_Name != '超级管理员'" type="danger" @click="DelAccount(scope.row.Id)">删除</el-button>
                    <el-button size="small" v-if="scope.row.Role_Name != '超级管理员'" type="primary">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 分页部分-->
    <table>
        <tr>
            <td>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="PageInfo.index" v-model:page-size="PageInfo.size"
                        :page-sizes="[2, 3, 4, 5]" :size="PageInfo.size" :disabled="disabled" :background="background"
                        layout="sizes, slot" :total="PageInfo.zongtiao" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                        数据共<span style="color: red;">{{ PageInfo.zongtiao }}</span>条,
                        每页<span style="color: red;">{{ PageInfo.size }}</span>条
                        共<span style="color: red;">{{ PageInfo.index }}</span>/
                        <span style="color: red;">{{ PageInfo.zongpage }}</span>页
                    </el-pagination>
                </div>
            </td>
            <td>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="PageInfo.index" v-model:page-size="PageInfo.size"
                        :page-sizes="[2, 3, 4, 5]" :size="PageInfo.size" :disabled="disabled" :background="background"
                        layout="slot,prev,pager,next,jumper" :total="PageInfo.zongtiao" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
                        <el-button type="primary" size="small" link @click="handleCurrentChange(1)">首页</el-button>
                    </el-pagination>
                </div>
            </td>
            <td>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="PageInfo.index" v-model:page-size="PageInfo.size"
                        :page-sizes="[2, 3, 4, 5]" :size="PageInfo.size" :disabled="disabled" :background="background"
                        layout="slot" :total="PageInfo.zongtiao" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
                        <el-button type="primary" size="small" link
                            @click="handleCurrentChange(PageInfo.zongpage)">尾页</el-button>
                    </el-pagination>
                </div>
            </td>
        </tr>
    </table>

    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" title="新增管理员" width="620">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="AddInfo" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="部门名称">
                <el-cascader v-model="AddInfo.Depart_Id" :options="DepartInfo" @change="TreeChanger" :props="props1"
                    clearable />
            </el-form-item>

            <el-form-item label="姓名" prop="Accoun_RealName">
                <el-input v-model="AddInfo.Accoun_RealName" />
            </el-form-item>

            <el-form-item label="身份证号" prop="Accoun_CodeId">
                <el-input v-model="AddInfo.Accoun_CodeId" />
            </el-form-item>

            <el-form-item label="联系方式" prop="Accoun_Phone">
                <el-input v-model="AddInfo.Accoun_Phone" />
            </el-form-item>

            <el-form-item label="账号" prop="Accoun_Name">
                <el-input v-model="AddInfo.Accoun_Name" />
            </el-form-item>

            <el-form-item label="角色">
                <el-select v-model="AddInfo.Role_Id" placeholder="请选择角色" disabled>
                    <el-option label="超级管理员" :value="1" />
                    <el-option label="系统管理员" :value="4" />
                    <el-option label="网格长" :value="2" />
                    <el-option label="网格员" :value="3" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    新增
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>



</template>


<script setup lang="ts">
    import axios from 'axios';
    import { ref, reactive, onMounted } from 'vue';
    import {  type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
    import { ElMessage, ElMessageBox } from 'element-plus'
    //显示响应式数据
    const Info = ref([])
    //分页响应性数据
    const PageInfo = ref({
        index: 1,
        size: 3,
        zongtiao: 0,
        zongpage: 0,
    })
    const background = ref(true)
    const disabled = ref(false)

    //修改页容量
    const handleSizeChange = (val: number) => {
        PageInfo.value.size = val;
        ShowAccount();
    }
    //跳转页
    const handleCurrentChange = (val: number) => {
        PageInfo.value.index = val;
        ShowAccount();
    }
    //生命周期钩子函数
    onMounted(() => {
        ShowAccount();
        GetDepartmentTree();//级联
    })
    //查询条件
    const formInline = reactive({
        Department_Name: "",
        Account_RealName: "",
    })
    //显示
    const ShowAccount = () => {
        axios.get("http://localhost:5192/api/Account/ShowAccount",
            {
                params: {
                    Department_Name: formInline.Department_Name,
                    Account_RealName: formInline.Account_RealName,
                    index: PageInfo.value.index,
                    size: PageInfo.value.size,
                }
            }
        )
            .then(res => {
                Info.value = res.data.Plist;
                PageInfo.value.zongpage = res.data.ZongPgae;
                PageInfo.value.zongtiao = res.data.ZongTiao;
            })
    }
    //重置
    const reset = () => {
        formInline.Account_RealName = "";
        formInline.Department_Name = "";
    }

    //逻辑删除
    const DelInfo=ref({
        CreateName:"",
    })
    const DelAccount = (Id:string) => {
        ElMessageBox.confirm(
            '确定删除?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
        .then(() => {
            axios.put("http://localhost:5019/api/Account/DelAccount",
                {
                    Id:Id,
                    CreateNam:DelInfo.value.CreateName,
                }
            )
            .then(res=>{
                if(res.data.Code==200)
                {
                    ElMessage.success(res.data.Message);
                    ShowAccount();
                }
                else
                {
                    ElMessage.error(res.data.Message)
                }
            })
        })
    }


//----------------------------------------------------------添加弹窗---------------------------------------------------8/
    const dialogVisible = ref(false);//用于弹窗是否显示

    const formSize = ref<ComponentSize>('default')
    const ruleFormRef = ref<FormInstance>()
    //添加响应式数据
    const AddInfo = ref({
        Accoun_Name: "",
        Accoun_Password: "",
        Accoun_Phone: "",
        Accoun_CodeId: "",
        Accoun_RealName: "",
        Depart_Id: 0,
        Role_Id: 4,
        CreateName: localStorage.getItem("Accoun_Name") || "",
    })

    const locationOptions = ['Home', 'Company', 'School']

    //验证
    const rules = reactive<FormRules>({
        Accoun_Name: [
            { required: true, message: '账号不能为空！', trigger: 'blur' },
        ],
        Accoun_Phone: [
            { required: true, message: '联系方式不能为空！', trigger: 'blur' },
            { pattern: /^1[3-9]\d{9}/, message: "手机号格式不正确！", trigger: 'blur' }
        ],
        Accoun_CodeId: [
            { required: true, message: '身份证号不能为空！', trigger: 'blur' },
        ],
        Accoun_RealName: [
            { required: true, message: '姓名不能为空！', trigger: 'blur' },
        ],
    })
    //添加账号信息
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                axios.post("http://localhost:5019/api/Account/AddAccount", AddInfo.value)
                    .then(res => {
                        if (res.data.Code = 200) {
                            ElMessage.success(res.data.Message);
                            ShowAccount();//跳转到显示列表
                            //添加成后关闭窗口
                            dialogVisible.value = false;
                            //清空表单数据
                            AddInfo.value.Depart_Id = 0;
                            AddInfo.value.Accoun_Name = "";
                            AddInfo.value.Accoun_Phone = "";
                            AddInfo.value.Accoun_CodeId = "";
                            AddInfo.value.Accoun_RealName = "";
                        }
                        else {
                            ElMessage.error(res.data.Message)
                        }
                    })
            } else {
                console.log('error submit!', fields)
            }
        })
    }
    //重置
    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }

//--------------------------------------------级联选择器---------------------------------------//

    const props1 = {
        checkStrictly: true,
        value: 'Id',
        label: 'Depart_Name',
        children: 'Children'
    }
    //级联响应式数据
    const DepartInfo = ref([])
    //获取数据
    const GetDepartmentTree = () => {
        axios.get("http://localhost:5192/api/Department/GetDepartmentTree")
            .then(res => {
                DepartInfo.value = res.data.Data
            })
    }
    //获取部门值
    const TreeChanger = (value: any) => {
        AddInfo.value.Depart_Id = value[value.length - 1];
    }


    const options = Array.from({ length: 10000 }).map((_, idx) => ({
        value: `${idx + 1}`,
        label: `${idx + 1}`,
    }))



</script>


<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>